@w: 25rem;
html, body, div, input, button, h2, h3, p {
  margin: 0;
  padding: 0;
}
html, body, .container1, .container2, .container3 {
  height: 100%;
}
.container1 {
  background-image: url('../img/bg_big.jpg');
  background-size: @w;
  background-repeat: no-repeat;
}
.input-box {
  height: 90/@w;
  position: absolute;
  bottom: 62/@w;
  left: 40/@w;
}
.input-box input {
  width: 300/@w;
  height: 90/@w;
  font-size: 28/@w;
  color: #999;
  border: none;
  vertical-align: top;
  float: left;
  border-radius: 4px;
  padding-left: 40/@w;
}
.input-box .sub-phone {
  width: 150/@w;
  height: 90/@w;
  background-color: #fe4e4e;
  color: #fff;
  font-size: 26/@w;
  border: none;
  border-radius: 4px;
}
.container2 {
  position: relative;
  .box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 560/@w;
    padding: 0 65/@w;
    h2 {
      font-size: 62/@w;
      padding-left: -20/@w;
    }
    .getcode {
      height: 120/@w;
      line-height: 120/@w;
      display: flex;
      justify-content: space-between;
      p {
        font-size: 36/@w;
      }
      .get-code {
        font-size: 30/@w;
        color: #fe4e4e;
        border: none;
        background-color: #fff;
      }
    }
    input {
      font-size: 72/@w;
      color: #fe4e4e;
      border: none;
      outline: none;
      width: 500/@w;
      letter-spacing: 60/@w;
    }
    .sub-code {
      width: 500/@w;
      height: 90/@w;
      border: none;
      border-radius: 45/@w;
      background-color: #fe4e4e;
      font-size: 30/@w;
      color: #fff;
      margin-top: 100/@w;
    }
  }
}
.container3 {
  .bg-box {
    height: 800/@w;
    background-image: url(../img/bg_3.jpg);
    background-size: 120%;
    background-position: -70/@w -300/@w;
    background-repeat: no-repeat;
    .code-box {
      text-align: center;
      padding-top: 100/@w;
      img {
        width: 330/@w;
      }
      p {
        font-size: 36/@w;
        color: #fff;
      }
    }
  }
  .app-down {
    width: 380/@w;
    height: 125/@w;
    margin: 0 auto;
    background-color: #fe4e4e;
    border-radius: 4px;
    display: flex;
    justify-content: space-around;
    .icon {
      width: 88/@w;
      height: 88/@w;
      background-image: url(../img/apple1_03.png);
      background-repeat: no-repeat;
      background-size: contain;
      margin-top: 16/@w;
    }
    .text {
      padding-top: 18/@w;
      h3 {
        font-size: 40/@w;
        color: #fff;
        height: 50/@w;
        line-height: 50/@w;
      }
      p {
        color: #fff;
      }
    }
  }
  .app-down:last-child {
    margin-top: 40/@w;
    background-color: #feb14e;
    .icon {
      background-image: url(../img/android_03.png);
    }
  }
}

.modal {
  height: 100%;
  background-color: rgba(172, 184, 187, 0.3);
  .box {
    width: 400/@w;
    height: 200/@w;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 8px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    p {
      font-size: 32/@w;
      height: 90/@w;
      line-height: 90/@w;
      text-align: center;
    }
    .btn {
      position: absolute;
      bottom: 1rem;
      text-align: center;
      width: 100%;
      button {
        border: none;
        border-radius: 4px;
        width: 8rem;
        height: 2rem;
        background-color: rgb(46, 172, 242);
        color: #fff;
        margin: 0 1rem;
      }
    }
  }
}
